<template>
  <div class="container">
    <div class="header">
      <div class="user-center">
        <img
          src="http://cdn.cnbj1.fds.api.mi-img.com/user-avatar/p01XuRscyCOI/ZccLgMLOKXaPkN.jpg?thumb=150x150"
          alt
          class="avator"
        />
        <div class="user-info">
          <span class="username">郭郭聪</span>
          <span class="mobile">15555124010</span>
        </div>
      </div>
    </div>
    <div class="more-order">
      <span>我的订单</span>
      <span style="position:relative">
        <van-icon name="arrow" color="#B8B8B8" />
      </span>
    </div>
    <ul class="order-status">
      <li>
        <img
          src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_paid.png"
          alt
        />
        <span>待付款</span>
      </li>
      <li>
        <img
          src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_receipt.png"
          alt
        />
        <span>待收货</span>
      </li>
      <li>
        <img
          src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_received_goods.png"
          alt
        />
        <span>评价</span>
      </li>
      <li>
        <img
          src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/ucenter/ucenter_icon_return_goods.png"
          alt
        />
        <span>退款/售后</span>
      </li>
    </ul>
    <div class="itemsDiv">
      <ul class="items">
        <li>
          <div class="item-summary">
            <img src="@/assets/crown.png" alt />
            <span>会员中心</span>
          </div>
          <van-icon name="arrow" color="#B8B8B8" />
        </li>
        <li>
          <div class="item-summary">
            <img src="@/assets/wallet.png" alt />
            <span>我的优惠</span>
          </div>
          <van-icon name="arrow" color="#B8B8B8" />
        </li>
      </ul>

      <ul class="items">
        <li>
          <div class="item-summary">
            <img src="@/assets/heart.png" alt />
            <span>服务中心</span>
          </div>
          <van-icon name="arrow" color="#B8B8B8" />
        </li>
        <li>
          <div class="item-summary">
            <img src="@/assets/home.png" alt />
            <span>小米之家</span>
          </div>
          <van-icon name="arrow" color="#B8B8B8" />
        </li>
      </ul>

      <ul class="items">
        <li>
          <div class="item-summary">
            <img src="@/assets/gift.png" alt />
            <span>礼物兑换</span>
          </div>
          <van-icon name="arrow" color="#B8B8B8" />
        </li>
        <li>
          <div class="item-summary">
            <img src="@/assets/setting.png" alt />
            <span>我的设置</span>
          </div>
          <van-icon name="arrow" color="#B8B8B8" />
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="less" scoped >
@import url("./index.less");
</style>
<script>
export default {
  name: "index"
};
</script>